
.image-gallery {
    display: flex;
    flex-direction: column;
    overflow-y: auto; /* Enable vertical scrolling */
    max-height: 400px; /* Set a height for the gallery */
    border: 1px solid #ccc; /* Optional border for visual clarity */
}

.image-row {
    display: flex; /* Arrange images horizontally */
}

.image-container {
    position: relative;
    margin: 10px; /* Space between images */
}

.tu {
    width: 150px;
    height: 150px;
    border-radius: 9px;
    transition: box-shadow 0.3s ease; /* Smooth transition for shadow */
}

.image-container:hover .tu {
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5); /* Shadow effect on hover */
}

.ai-button {
    position: absolute; /* Position button over the image */
    bottom: 20px; /* Adjust position */
    left: 50%; /* Center the button */
    transform: translateX(-50%); /* Center adjustment */
    background-color: #fff; /* Button color */
    color: #000;
    border: none;
    border-radius: 5px;
    padding: 5px 10px;
    cursor: pointer;
    opacity: 0; /* Invisible initially */
    transition: opacity 0.3s ease;
}

.image-container:hover .ai-button {
    opacity: 1; /* Show button on hover */
}

.loading {
    text-align: center;
    margin: 10px 0;
}
